
<template>
  <div class="common-details">
    <customDetailsTopbar title="年度重点工作详情" :show-close="false" flag @back="back" />
    <div class="d-scroll">
      <div class="pb-4">
        <custom-radio-tag1 class="mb-1 w-100 pl-1" :list="list" :value="activeIndex" is-scroll @change="tagChange" />
        <div class="">
          <div v-show="active === '工作进度'" class="bg-white mx-1 px-1 ">
            <customTitle :is-line="true" bg-color="#3795ff" title="基本信息" />
            <div v-for="(item, index) in descList" :key="index">
              <div>
                <custom-details-item :icon="item.icon" :label="item.label">
                  <template #valueSlot>
                    <span v-if="item.label !== '附件'">{{ item.value }}</span>
                    <div v-else class="value">
                      <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
                    </div>
                  </template>
                </custom-details-item>
              </div>
            </div>
            <customTitle :is-line="true" bg-color="#3795ff" title="重点工作内容" />
            <div class="listInner">
              <div v-if="listData.length > 0" class="common_list">
                <div v-for="(item, index) in listData" :key="index" class="list_item">
                  <div class="content_area">
                    <div class="number_order">{{ index + 1 }}</div>
                    <div class="right_content">
                      <div class="content_title" style="max-width: 100%">
                        {{ item.workContent }}
                      </div>
                      <ul>
                        <li>
                          <i class="iconfont c-text-color1">&#xe685;</i>
                          <div class="label">完成期限：</div>
                          <div class="value">{{ item.workType === '-'?'/':item.workType }}</div>
                        </li>
                        <li>
                          <i class="iconfont c-text-color2">&#xe790;</i>
                          <div class="label">企业总数：</div>
                          <div class="value">{{ item.companyNum === '-'?'/':item.companyNum }}{{ item.companyNum === '-'?'':'家' }}</div>
                        </li>
                        <li>
                          <i class="iconfont c-text-color3">&#xe725;</i>
                          <div class="label">不涉及企业数量：</div>
                          <div class="value">{{ item.isInvolveNum === '-'?'/':item.isInvolveNum }}{{ item.isInvolveNum === '-'?'':'家' }}</div>
                        </li>
                        <li>
                          <i class="iconfont c-text-color4">&#xe725;</i>
                          <div class="label">已完成企业数量：</div>
                          <div class="value">{{ item.finishNum === '-'?'/':item.finishNum }}{{ item.finishNum === '-'?'':'家' }}</div>
                        </li>
                        <li>
                          <i class="iconfont c-text-color5">&#xe64d;</i>
                          <div class="label">完成进度：</div>
                          <div class="value">{{ item.finishSchedule === '-'?'/':item.finishSchedule }}{{ item.finishSchedule === '-'?'':'%' }}</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div v-else class="text-center text-muted my-1">暂无数据</div> -->
              <el-empty v-else description="暂无数据" />
            </div>
          </div>
          <div v-show="active === '工作审核'">
            <div class="d-scroll px-1">
              <customSearch ref="customSearch" placeholder="请输入企业名称" title="企业列表" :total="examineData.total" :is-super-search="false" @search="handleSearch" />
              <el-alert :title="`本年度重点工作共有${infoForm.contentNum}项，下发企业${infoForm.companyNum}家，已提交企业${infoForm.yjtNum}家，已审核通过${infoForm.yshNum}家，待提交企业${infoForm.wyjNum}家`" type="warning" class="mb-1" :closable="false" />
              <!--              <el-alert :title="`本年度重点工作共有${infoForm.contentNum}项，涉及企业${infoForm.companyNum}家，已审核${infoForm.yshNum}家，待提交${infoForm.wyjNum}家`" type="warning" class="mb-1" :closable="false" />-->
              <div class="listInner">
                <div v-if="examineData.listData && examineData.listData.length>0" class="common_list">
                  <div v-for="(item, index) in examineData.listData" :key="index" class="list_item" @click="goToDetails(item)">
                    <div class="content_area">
                      <div class="number_order">{{ index + 1 }}</div>
                      <div class="right_content">
                        <div class="content_title" style="max-width: 100%">
                          {{ item.companyName }}
                        </div>
                        <ul>
                          <li>
                            <i class="iconfont c-text-color1">&#xe8d5;</i>
                            <div class="label">所属年份：</div>
                            <div class="value">{{ item.dataYear }}</div>
                          </li>
                          <li>
                            <i class="iconfont c-text-color2">&#xe685;</i>
                            <div class="label">企业上报时间：</div>
                            <div class="value">{{ item.reportTime === '-'?'/':item.reportTime }}</div>
                          </li>
                          <li>
                            <i class="iconfont c-text-color3">&#xe6a2;</i>
                            <div class="label">任务状态：</div>
                            <div class="value">{{ item.status }}</div>
                          </li>
                          <li>
                            <i class="iconfont c-text-color4">&#xe685;</i>
                            <div class="label">审核时间：</div>
                            <div class="value">{{ item.auditTime === '-'?'/':item.auditTime }}</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <customLoadmore ref="customLoadmore" :page-num="examineData.formInline.pageNum" :pages="examineData.pages" @load="handlePages" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="active === '工作进度'" class="bottom-box d-flex justify-content-center align-items-center">
        <van-button plain type="info" size="small" @click="goToCompanyList">查看企业完成情况</van-button>
      </div>
    </div>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>
<script>
import commonList from '@/assets/mixin/commonList'
import {
  aqYearWorkDetails,
  HbYearWorkCompanyAuditList,
  hbYearWorkDetails,
  NyYearWorkCompanyAuditList,
  nyYearWorkDetails,
  TpfYearWorkCompanyAuditList,
  tpfYearWorkDetails,
  XfYearWorkCompanyAuditList,
  xfYearWorkDetails,
  yearWorkCompanyAuditList
} from '@/api/commonPage/AnnualWork'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
import CustomTitle from '@/components/globals/custom-title.vue'
import CustomDetailsItem from '@/components/globals/custom-details-item.vue'
import AttachPopUp from '@/components/globals/attachPopUp.vue'

export default {
  components: { AttachPopUp, CustomDetailsItem, CustomTitle, CustomDetailsTopbar },
  mixins: [commonList],
  data() {
    return {
      workId: '',
      descList: [
        { label: '所属年份', value: '/', fieldName: 'dataYear', icon: '&#xe8d5;' },
        { label: '年度重点工作名称', value: '/', fieldName: 'workName', icon: '&#xe62c;' },
        { label: '集团下发时间', value: '/', fieldName: 'sendTime', icon: '&#xe685;' },
        { label: '附件', value: [], fieldName: 'attachmentDetails', uuid: '', icon: '&#xe677;' }
      ],
      listData: [],
      list: [
        { label: '工作进度' },
        { label: '工作审核' }
      ],
      infoForm: {},
      active: '工作进度',
      activeIndex: 0,
      examineData: {
        unFinishNum: 0,
        finishNum: 0,
        listData: [],
        total: 0,
        formInline: {
          pageNum: 1,
          pageSize: 10,
          companyName: ''
        },
        pages: 0
      }
    }
  },
  created() {
    const { current, companyId } = this.$route.query
    this.companyId = companyId || ''
    this.current = current || ''
  },
  mounted() {
    const { current, workId, active } = this.$route.query
    this.current = current || ''
    this.workId = workId || ''
    if (active) {
      this.activeIndex = this.list.findIndex(val => val.label === active)
      this.active = active
    }
    this.$nextTick(() => {
      this.getDetails()
      this.getAuditList()
    })
  },
  methods: {
    // 获取详情
    async getDetails() {
      const api = {
        安全生产: aqYearWorkDetails,
        环保管理: hbYearWorkDetails,
        消防管理: xfYearWorkDetails,
        能源管理: nyYearWorkDetails,
        碳排放管理: tpfYearWorkDetails
      }

      const { status, data } = await api[this.current]({ workId: this.workId })
      if (status === 0 && data) {
        this.descList.forEach((v) => {
          v.value = data[v.fieldName] !== '' ? data[v.fieldName] : '/'
        })
        this.infoForm = data
        this.listData = data.yearWorkContentList
      }
    },
    async getAuditList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      const examineApiList = {
        安全生产: yearWorkCompanyAuditList,
        环保管理: HbYearWorkCompanyAuditList,
        能源管理: NyYearWorkCompanyAuditList,
        消防管理: XfYearWorkCompanyAuditList,
        碳排放管理: TpfYearWorkCompanyAuditList
      }
      if (examineApiList[this.current]) {
        const { status: examineStatus, data: examineData } = await examineApiList[this.current]({ workId: this.workId, ...this.examineData.formInline })
        if (examineStatus === 0 && examineData) {
          this.examineData.listData = flag ? this.examineData.listData.concat(examineData.list) : examineData.list
          this.examineData.pages = examineData.pages
        }
      }
      this.$refs.customLoadmore.loadStatus = false
    },
    // 跳转工作项包含的企业列表
    goToCompanyList() {
      this.$router.push({
        path: '/staging/AnnualWorkCompany',
        query: { current: this.current, workId: this.workId, active: this.active }
      })
    },
    // 返回年度重点工作
    back() {
      this.$router.push({
        path: '/staging/AnnualWork',
        query: { current: this.current }
      })
    },
    tagChange(val) {
      this.active = val.item.label
    },
    handleSearch(val) {
      this.examineData.formInline.companyName = val
      this.getAuditList()
    },
    handlePages(value) {
      this.examineData.formInline.pageNum = value
      this.getAuditList(true)
    },
    goToDetails(item) {
      const { workId, managerId, companyId } = item
      this.$router.push({
        path: '/staging/AnnualWorkExamineDetails',
        query: { companyId, id: workId || managerId, current: this.current, active: this.active, item: JSON.stringify(item), workId: this.workId }
      })
    }
  }
}
</script>
<style lang="scss">
.bottom-box{
  position: fixed;
  bottom: 1px;
  min-height: 100px;
  width: 100%;
  background-color: rgba(255, 255, 255,0.9);
  box-shadow: 0px -8px 8px rgba(0,0,0,0.4);
  .el-button{
    margin: auto;
  }
}
</style>
<style lang="scss" scoped>
</style>
